<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { TreeData, TreeInstance } from 'element-plus';
import { fetchGetDeptTree } from '@/service/api';

defineOptions({ name: 'ScopeTreeSelect' });

const treeSelectRef = ref<TreeInstance | null>(null);
const treeData = ref<TreeData>([]);

onMounted(async () => {
  const { data, error } = await fetchGetDeptTree();
  if (!error && data) {
    data.disabled = true;
    treeData.value.push(data);
  }
});

const model = defineModel<CommonType.IdType[]>('modelValue', {
  default: []
});
</script>

<template>
  <ElTreeSelect
    v-if="treeData && treeData.length > 0"
    ref="treeSelectRef"
    v-model="model"
    :data="treeData"
    node-key="value"
    :empty-values="['']"
    value-on-clear=""
    show-checkbox
    check-strictly
    check-on-click-node
    clearable
    multiple
    collapse-tags
    collapse-tags-tooltip
  />
</template>

<style scoped lang="scss"></style>
